@rem : 50;
@media screen and (min-width:1200px) {
    html{
        font-size: (1200px / @rem);
    }
}
@media  screen and (max-width:970px) {
    html {
        font-size: (970px / @rem);
    }
}
@media screen and (max-width:780px) {
    html {
        font-size: (780px / @rem);
    }
}
@media screen and (max-width:540px) {
    html {
        font-size: (540px / @rem);
    }
}
@media screen and (max-width:320px) {
    html {
        font-size: (320px / @rem);
    }
}

@baseFont: (1200px / @rem);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;;
}
body {
    overflow-x: hidden;
    background-color: #cdcdcd;
}
input {
    outline: none;
}
a {
    text-decoration: none;
    color: #0094ff;
}
.w {
    width: (800rem / @baseFont );
    margin: 0 auto;
}
header.title {
    height:(50rem / @baseFont);
    background-color: #323232;
    div {
        &.w{
            height: 100%;
            label {
                display: flex;
                align-items: center;
                padding: (10rem / @baseFont) (30rem / @baseFont);
                height: 100%;     
                h1{
                    flex: 1;
                    color: #fff;
                    font-size: (20rem / @baseFont);
                    cursor: pointer;
                }
                 input {
                     flex: 1.5;
                     padding: (6rem / @baseFont);
                     padding-left: (10rem / @baseFont);
                     font-size: (14rem / @baseFont);
                     border: 0;
                     border-radius: (8rem / @baseFont);
                     box-shadow: (-2rem / @baseFont) (2rem / @baseFont)  (8rem / @baseFont) rgba(0,0,0,.4) inset, (2rem / @baseFont) (-2rem / @baseFont) (8rem / @baseFont) rgba(0,0,0,.4) inset;
                }
            }            
        }
    }
}
.main {
    padding: (15rem / @baseFont)(30rem / @baseFont);
    h3.title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: (25rem / @baseFont);
        .count-span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: (20rem / @baseFont);
            height: (20rem / @baseFont);
            background-color: #e6e6e6;
            color: #000;
            font-size: (16rem / @baseFont);
            border-radius: 50%;
        }
    }
    div.done-item {
        ul.item-list {
            &>li {
                opacity: 0.5;
            }
        }
    }
    ul.item-list {
        position: relative;
        padding: (10rem / @baseFont) 0;
        &>li {
            display: flex;
            overflow: hidden;
            height: (40rem / @baseFont);
            padding-left: (5rem / @baseFont);
            margin: (10rem / @baseFont) 0;
            background-color: #629a9c;
            border-radius: (5rem / @baseFont);
            div.content {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100%;
                padding-left: (40rem / @baseFont);
                background-color: #fff;
                font-size: (16rem / @baseFont);
                cursor:move;
                label{
                    display: flex;
                    align-items: center;
                    cursor:pointer;
                    input {
                        &[type="checkbox"] {
                            width: (20rem / @baseFont);
                            height: (20rem / @baseFont);
                            margin-right: (5rem / @baseFont);
                            cursor: pointer;
                    }                    
                    }
                    .modi {
                        font-size: (16rem / @baseFont)!important;
                    }
                }
                
                span.del {
                    width: (22rem / @baseFont);
                    height: (22rem / @baseFont);
                    margin-right: (20rem / @baseFont);
                    border: (5rem / @baseFont) double #629a9c;
                    background:-webkit-liner-gradient(90deg,#fff,#629a9c);
                    cursor: pointer;
                    border-radius: 50%;                    
                 }
            }
            
        }
    }
}
footer.w {
    text-align: center;
    font-size: (14rem / @baseFont);
}